<template>
	<view class="wrap">
		<view class="u-tabs-box flexad"><u-tabs :list="tab" :current="current" @change="changeTab" active-color="#dc1d32" gutter="60"></u-tabs></view>
	</view>
	<view class="content">
		<z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList">
			<!-- 已上架 -->
			<view class="page-box" v-show="!current">
				<view class="order" v-for="(item, index) in dataList" :key="item.id" @click="xiangqing(item.id)">
					<view class="item flexstst">
						<view class="left"><image :src="item.product_img" mode="aspectFill" class="picture"></image></view>
						<view class="right flexcobe">
							<text class="b">{{ item.product_name }}{{ item.alias_name }}</text>
							<text class="fs24 c9">{{ item.colliery_name ? item.colliery_name : '' }}</text>
							<text class="fs24 c9">热值：{{ item.zb_qnet_ar }}kCal 硫分：{{ item.zb_st_d }}%</text>
							<view class="flexbe w100">
								<view class="flexst pricebox">
									<text class="price b">￥{{ item.a_fare }}</text>
									<text class="fs24 c9">/吨</text>
								</view>
								<view class="flexst">
									<u-button type="error" plain size="mini" class="mlr20" @click="editPrice(item.id, item.a_fare)">修改价格</u-button>
									<u-button type="error" size="mini" @click="operate(item.id, 0)">下架</u-button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 已下架 -->
			<view class="page-box" v-show="current">
				<view class="order" v-for="(item, index) in dataList" :key="item.id" @click="xiangqing(item.id)">
					<view class="item flexstst">
						<view class="left"><image :src="item.product_img" mode="aspectFill" class="picture"></image></view>
						<view class="right flexcobe">
							<text class="b">{{ item.product_name }}{{ item.alias_name }}</text>
							<text class="fs24 c9">{{ item.colliery_name }}</text>
							<text class="fs24 c9">热值：{{ item.zb_qnet_ar }}kCal 硫分：{{ item.zb_st_d }}%</text>
							<view class="flexbe w100">
								<view class="flexst pricebox">
									<text class="price b">￥{{ item.a_fare }}</text>
									<text class="fs24 c9">/吨</text>
								</view>
								<view class="flexst">
									<u-button type="error" plain size="mini" class="mlr20" @click="editPrice(item.id, item.a_fare)">修改价格</u-button>
									<u-button type="error" size="mini" @click="operate(item.id, 1)">上架</u-button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { goods } from '../../../api/goods';
import { Ioperation, Ilist } from '../../../api/vo/goods';

const paging = ref(null);
const dataList = ref([]);
const current = ref(0);
const tab = reactive([
	{
		name: '已上架'
	},
	{
		name: '已下架'
	}
]);

// 查询商品
const queryList = (page, size) => {
	!current.value ? getOnSale(page, size) : getOffSale(page, size);
};

// 切换tab
const changeTab = index => {
	current.value = index;
	paging.value.reload()
};

// 获取上架商品
const getOnSale = async (page, size) => {
	let commodity = new Ilist();
	commodity.page = page;
	commodity.size = size;
	commodity.param.status = 1;
	const res = await goods.list(commodity).catch(err => {
		paging.value.complete(false);
	});
	paging.value.complete(res.results);
};

// 获取下架商品
const getOffSale = async (page, size) => {
	let commodity = new Ilist();
	commodity.page = page;
	commodity.size = size;
	commodity.param.status = 0;
	const res = await goods.list(commodity).catch(err => {
		paging.value.complete(false);
	});
	paging.value.complete(res.results);
};
</script>

<style lang="scss">
page {
	min-height: 100%;
	background-color: #f8fafb;
}
.content {
	padding-top: 90rpx;
}
.zanwu {
	text-align: center;
	font-size: 28rpx;
	color: #999999;
	line-height: 90rpx;
}

.u-tabs-box {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 90rpx;
	z-index: 9999;
	background: #ffffff;
}

.tabact {
	background: #ff0000;
	border-radius: 50rpx;
	line-height: 65rpx;
	height: 65rpx;
	width: 180rpx;
	text-align: center;
	color: #ffffff;
}

.picture {
	width: 180rpx;
	height: 180rpx;
	border-radius: 10rpx;
	margin-right: 20rpx;
}

.order {
	.right {
		height: 190rpx;
	}

	.item {
		padding: 20rpx;
		border-bottom: 1rpx solid #dddddd;
	}
}

.price {
	font-size: 36rpx;
	color: #dc1d32;
	margin-right: 8rpx;
}

.ml40 {
	margin-left: 40rpx;
}

.mlr20 {
	margin: 0 20rpx;
}

.pricebox {
	width: 250rpx;
}

.modal {
	width: 70vw;
	height: 21vh;
	padding: 3vh 0;
}

.btn {
	width: 200rpx;
	line-height: 80rpx;
	text-align: center;
	border-radius: 50rpx;
	margin-top: 2vh;
}

.cancel {
	border: 1rpx solid #fa3534;
	color: #fa3534;
}

.comfirm {
	background: #fa3534;
	color: #ffffff;
}
</style>
